<template>
  <div class="app-container">
    <el-form
      ref="objectForm"
      :model="object"
      label-width="150px">
      <title-container describe="基本信息" />
      <el-row class="gpo-form mt-20">
        <el-form-item
          label="模块名称："
          prop="name">
          <el-input
            v-model="name"
            disabled/>
        </el-form-item>
        <el-form-item
          label="应用终端："
          prop="applicationTerminal">
          <el-input
            v-model="applicationTerminal"
            disabled/>
        </el-form-item>
      </el-row>
      <!--户型信息-->
      <el-row :gutter="24">
        <el-row>
          <el-col :span="12">
            <div
              style="border-left: 4px solid #4C7FD7; padding-left: 18px;margin-top: 5px"
              class="font16 color-333">推荐好房</div>
          </el-col>
          <el-col
            :span="12"
            class="text-right">
            <el-button
              icon="el-icon-circle-plus-outline"
              class="border-4C7FD7 color-4C7FD7"
              style="padding: 5px 10px;"
              @click="showDialog1">新增</el-button>
          </el-col>
        </el-row>
        <el-row class="mt-15">
          <el-table
            :data="buildingList"
            :header-cell-style="{background:'#F1F3F5',color:'#666666'}"
            border
            fit
            highlight-current-row
            style="width: 100%">
            <el-table-column
              align="center"
              label="楼盘名称">
              <template slot-scope="scope">
                <span>{{ scope.row.object.buildingName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="所在城市">
              <template slot-scope="scope">
                <span>{{ scope.row.object.cityName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="65">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="deleteIndex(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-form>
    <div class="gpo-btn text-center mt-20" >
      <el-button
        type="primary"
        class="gpo-btn_small"
        @click="onBack">返回</el-button>
      <el-button
        type="primary"
        class="gpo-btn_small"
        @click="onSubmit(message)">提交</el-button>
    </div>
    <!-- 展示所有项目 -->
    <!-- 新增修改 -->
    <el-dialog
      :visible.sync="dialogFormVisible1"
      title="楼盘信息"
      width="650px">
      <el-row>
        <el-form label-width="90px">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-form-item label="楼盘名称：" >
                <el-input
                  v-model="listQuery.buildingName"
                  placeholder="楼盘名称"/>
              </el-form-item>
            </el-col>
            <el-col
              :span="4"
              class="text-center">
              <el-button
                type=""
                class="border-4C7FD7 color-4C7FD7"
                icon="el-icon-search"
                @click="searchList">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column
            label="楼盘名称"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.buildingName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在城市"
            align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.object.cityName }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div
        slot="footer"
        class="dialog-footer text-center">
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="confirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TitleContainer from '@/components/GpoCommon/TitleContainer'
import Tinymce from '@/components/Tinymce'
import SingleImage from '@/components/Upload/singleImage'
export default {
  name: 'CreateNews',
  components: { TitleContainer, Tinymce, SingleImage },
  data() {
    return {
      message: '新增首页设置',
      buildingTypes: [], // 楼盘
      dialogFormVisible1: false,
      listQuery: {
        level: 'building',
        buildingName: '',
        pageNum: 1,
        pageSize: 10
      },
      buildingList: [],
      name: '',
      applicationTerminal: '',
      object: {
        'name': '',
        'applicationTerminal': '',
        'level2': '',
        'level1': 'fy_homepageModule',
        'level': '',
        'buildingList': []
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 获取基本信息
      const query2 = {
        id: this.$route.params.id,
        plateType: 'gnmpp_fangyuns'
      }
      this.searchListAll(query2).then((res) => {
        this.name = res.data.list ? res.data.list[0].object.name : ''
        this.applicationTerminal = res.data.list ? res.data.list[0].object.applicationTerminal : ''
        // 初始化楼盘
        let query1 = {
          level1: 'fy_homepageModule',
          name: this.name,
          pageSize: 10,
          pageNum: 1
        }
        query1 = this.setListQuery(query1)
        this.searchListAll(query1).then((res) => {
          if (res.data.list.length > 0) {
            this.object = res.data.list[0]
            this.buildingList = res.data.list[0].object.buildingList
          }
        })
      })
    },
    // showDialog
    showDialog1() {
      this.dialogFormVisible1 = true
      this.searchList()
    },
    confirm() {
      const _this = this
      this._.forEach(_this.multipleSelection, function(selected, index) {
        if (_this.object.id) {
          _this.object.object.buildingList.push(selected)
        } else {
          _this.object.buildingList.push(selected)
        }
      })
      if (!this.object.id) {
        this.buildingList = this.object.buildingList
      }
      this.dialogFormVisible1 = false
    },
    deleteIndex(index) {
      this.object.object.buildingList.splice(index, 1)
    },
    async onSubmit() {
      let objectData = {}
      if (!this.object.id) {
        objectData = {
          object: this.object,
          plateType: 'gnmpp_fangyuns'
        }
      } else {
        objectData = this.object
      }
      console.log(objectData)
      // return;
      await this.saveNewMedia(objectData, '新增推荐好房')
      this.init()
    }
  }
}
</script>
